<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>船舶台账</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form" style="margin-top:0px;">
        <a-form-model-item label="船名">
          <a-select v-model="form.shipId" style="width:200px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(item,index) in shipNameList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="航次">
          <a-input v-model="form.voyageNumberLike" />
        </a-form-model-item>
        <a-form-model-item>
          <a-input-group compact>
            <a-select v-model="form.dateSearchType" style="width:110px">
              <a-select-option :value="1">起航日期</a-select-option>
              <a-select-option :value="2">到达日期</a-select-option>
            </a-select>
            <a-range-picker @change="onChange">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-input-group>
        </a-form-model-item>
        <a-form-model-item label="船舶类型">
          <a-select v-model="form.isSelfOperation" style="width:120px;">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">自营</a-select-option>
            <a-select-option :value="0">租赁</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-card style="text-align:center; margin-top:24px;">
        <a-row :gutter="[16]">
          <a-col :span="4" class="assent">
            <div class="assent_mes">总航次</div>
            <div class="assent_shu">{{statistics.voyageNum || '--'}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总装卸量TEU</div>
            <div class="assent_shu">{{statistics.teuQuantity || '--'}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总航期（天）</div>
            <div class="assent_shu">{{statistics.sailingDays || '--'}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总应收（元）</div>
            <div class="assent_shu">{{statistics.receivableAmount || '--'}}</div>
          </a-col>
          <a-col :span="4" class="assent">
            <div class="assent_mes">总应付（元）</div>
            <div class="assent_shu">{{statistics.payableAmount || '--'}}</div>
          </a-col>
          <a-col :span="4">
            <div class="assent_mes">总毛利（元）</div>
            <div class="assent_shu">{{statistics.grossMargin || '--'}}</div>
          </a-col>
        </a-row>
      </a-card>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :scroll="{x:1600}"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="action" slot-scope="record">
          <a @click="company(record)">详情</a>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import { queryShipNameList } from '@/api'
import {
  queryShipReportList,
  queryShipReportListStatistics
} from '@/api/dataBI'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '船名',
    dataIndex: 'shipName'
  },
  {
    title: '船舶类型',
    _needName: true,
    dataIndex: 'isSelfOperation',
    customRender: (text, record, index) => {
      return record.isSelfOperation ? '自营' : '租赁'
    }
  },
  {
    title: '航次',
    dataIndex: 'voyageNumber'
  },
  {
    title: '航线',
    dataIndex: 'route',
    width: 200
  },
  {
    title: '起航日期',
    dataIndex: 'departureDate'
  },
  {
    title: '到达日期',
    dataIndex: 'arriveDate'
  },
  {
    title: '航期（天）',
    dataIndex: 'sailingDays'
  },
  {
    title: '装卸总量（TEU）',
    dataIndex: 'handlingTeuQuantity',
    width: 150
  },
  {
    title: '总应收（元）',
    dataIndex: 'receivableAmount',
    customRender: (text, record, index) => {
      return record.receivableAmount.toFixed(2)
    }
  },
  {
    title: '总应付（元）',
    dataIndex: 'payableAmount',
    customRender: (text, record, index) => {
      return record.payableAmount.toFixed(2)
    }
  },
  {
    title: '毛利（元）',
    dataIndex: 'grossMargin',
    customRender: (text, record, index) => {
      return record.grossMargin.toFixed(2)
    }
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action'
    }
  }
]
export default {
  data () {
    return {
      shipNameList: [],
      form: {
        shipId: '', // 船舶id
        voyageNumberLike: '', // 航次
        dateSearchType: 1, // 时间类型 1、启航日期 2、到达日期
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        isSelfOperation: '' // 是否自营
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      statistics: {}
    }
  },
  methods: {
    shipNameListRequest (e) {
      queryShipNameList(e)
        .then(res => {
          this.shipNameList = res.data
        })
        .catch(rs => {})
    },
    shipReportListRequest (e) {
      this.loading = true
      queryShipReportList(e)
        .then(res => {
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.shipReportListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.shipReportListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    shipStatisticsRequest (e) {
      queryShipReportListStatistics(e)
        .then(res => {
          let resData = res.data
          let receivableAmount = resData.receivableAmount
          let payableAmount = resData.payableAmount
          let grossMargin = resData.grossMargin
          if (receivableAmount || receivableAmount === 0) resData.receivableAmount = resData.receivableAmount.toFixed(2)
          if (payableAmount || payableAmount === 0) resData.payableAmount = resData.payableAmount.toFixed(2)
          if (grossMargin || grossMargin === 0) resData.grossMargin = resData.grossMargin.toFixed(2)
          this.statistics = resData
        })
        .catch(rs => {})
    },
    onChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      this.shipStatisticsRequest({
        ...this.form
      })
      this.shipReportListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      commonExport('/shipReport/exportShipReportList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    company (e) {
      window.open(
        `/shipCenter/voyageManagement/detail/${e.shipVoyageId}`,
        '_blank'
      )
    }
  },
  mounted () {
    this.shipNameListRequest({})
    this.shipStatisticsRequest({
      ...this.form
    })
    this.shipReportListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
